<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>腾讯地图坐标拾取器</title>
    <link rel="stylesheet" href="./addrHelper.css">
</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.js"
        integrity="sha512-lH7rGfsFWwehkeyJYllBq73IsiR7RH2+wuOVjr06q8NKwHp5xVnkdSvUm8RNt31QCROqtPrjAAd1VuNH0ISxqQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer">
    </script>
  <!--   <script type="text/javascript" src="/Users/feng/iceymoss/tencent-map-gis/addr-helper/src/"></script> -->
    <script>
        layui.config({
            base: './'
        }).use(["addrHelper"], function () {
            const addrHelper = layui.addrHelper
            const layer = layui.layer
            // console.log(addrHelper)

            // 打开坐标拾取器
            addrHelper.render({
                key: "MZQBZ-EKRKU-SK5VS-2DA2P-GIL6V-BUBEL", //必传，腾讯地图apikey
                lat: 31.582538, //可选项，初始化纬度
                lng: 120.468956, //可选项，初始化经度
                width: "100vw", //可选项，弹窗的宽度 默认80vw
                height: "100vh", //可选项，弹窗的高度 默认80vh
                cssDebug: false, //可选项，主要为开发时调试样式
                success: function (address, points) { //可选项，地址选择成功后回调
                    console.log(address, points)
                    if (address === null) {
                        layer.msg("请选择地址后再提交", {icon: 2})
                        return
                    }
                    layer.alert(JSON.stringify(address))
                    addrHelper.close() //关闭坐标拾取器
                }
            })
        })
    </script>
</body>

</html>